<template>
    <div class="con">
        <div class="login">
            <div class="djx">
                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="managerName">
                        <el-input type="text" v-model="ruleForm.managerName" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="age">
                        <el-input v-model="ruleForm.age" size="small" style="width: 100%;"></el-input>
                        <span>
                            <div class="login-code" @click="refreshCode">
                                <!--验证码组件-->
                                <s-identify :identifyCode="identifyCode"></s-identify>
                            </div>
                        </span>
                    </el-form-item>
                    <div @click="toRegister">未注册！请先注册</div>
                    <el-form-item>
                        <el-button @click="submitForm" size="small">提交</el-button>
                        <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script >
import SIdentify from '../components/SIdentify.vue';
export default{
    components: { SIdentify },
    data() {
        const sidentify = (rule, value, callback) => {
            let newVal = value.toLowerCase()
            let identifyStr = this.identifyCode.toLowerCase()
            if (newVal === '') {
                callback(new Error('请输入验证码'))
            } else if (newVal !== identifyStr) {
                console.log('validateVerifycode:', value)
                callback(new Error('验证码不正确'))
            } else {
                callback()
            }
        };
        return {
            ruleForm: {
                managerName: '',
                password: ''
            },
            // captcha: ""
            identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
            identifyCode: '',
        };
    },
    methods: {
        toRegister() {
            this.$router.push('/register');
        },
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        async submitForm() {
            // this.$router.push('/user');
            await this.$axios.post("http://localhost:3000/login", {
                managerName: this.ruleForm.managerName,
                password: this.ruleForm.password,
                // captcha: this.ruleForm.age
            }).then(res => {
                console.log(res);
                if (res.code = '200') {
                    alert('登录成功')
                    console.log(res);
                    localStorage.setItem('token', res.data.token);
                    localStorage.setItem("user",res.config.data)
                    this.$router.push('/user');
                }
                else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
            }
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
        // 验证码初始化
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
    },
}
</script>

<style>
.con {
    display: flex;
    justify-content: center;
    height: 675px;
}

.login {
    background: url("../assets/flied.jpg");
    background-color: white;
    width: 100%;
}

.djx {
    width: 30%;
    padding: 100px 60px;
    float: right;
}
</style>